<template>
  <p>去重前：</p>
  <el-input
    v-model="content"
    :autosize="{ minRows: 7, maxRows: 4 }"
    type="textarea"
    :placeholder="'aaa\naaa'"
  ></el-input>
  <p>
    去重后：<i
      class="iconfont icon-fuzhi"
      title="点击复制结果"
      @click="handleCopy"
    ></i>
  </p>
  <el-input
    v-model="result"
    :autosize="{ minRows: 7, maxRows: 4 }"
    type="textarea"
    placeholder="去重结果"
    v-clipboard:copy="copyContent"
  />
</template>

<script setup>
import _ from "lodash";
import { reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";

const data = reactive({
  content: "",
});

const { content } = toRefs(data);

//去重操作
const result = computed(() => {
  return _.chain(data.content.split("\n")).uniq().join("\n").value();
});

const copyContent = computed(() => {
  return result.value;
});

//复制操作
const handleCopy = () => {
  if (result.value === "")
    return ElMessage({
      showClose: true,
      message: "不能复制空内容！",
      type: "error",
    });
  ElMessage({
    showClose: true,
    message: "复制成功",
    type: "success",
  });
};

const router = useRouter();
const handleClose = () => {
  router.push("/");
};
</script>

<style lang="less" scoped>
P {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  margin: 5px 5px 5px 5px;
}
.el-button {
  margin-top: 10px;
  border-radius: 5px;
}
</style>
